export const versionList = () => {
  const version = document.querySelector('#version') as HTMLSelectElement;
  if (!version) {
    return;
  }
  const versionOptions = Array.from(document.querySelectorAll('#version > option')) as HTMLOptionElement[];

  const div = document.createElement('div');
  div.id = 'version_list_vue_app';
  (version.parentNode as HTMLDivElement).insertBefore(div, version);
  version.classList.add('bz_default_hidden');
  
  const { createApp, ref, reactive } = Vue;

  const app = createApp({
    template: `
      <n-select
        v-model:value="selectedValue"
        filterable
        :options="options"
        @update:value="handleUpdateValue"
      ></n-select>
    `,
    setup() {
      const selectedValue = ref(version.value);
      const options = reactive(versionOptions.map((option) => {
        return {
          label: option.innerText,
          value: option.value,
        }
      }));

      return {
        selectedValue,
        options,
        handleUpdateValue(value: string) {
          version.value = value;
        }
      }
    }
  });

  app.use(naive);
  app.mount('#version_list_vue_app');
};
